<template>
    <div v-bind:class="['com-button' ,type?type:'']" @click="onClick">
        <slot/>
    </div>
</template>

<<script>
    export default{
        name:'comButton',
        props:{
            type:{
                type: String,
                required: false,
            }
        },
        methods: {
            onClick (e){
                console.log("------------")
                this.$emit('click',e)
            }
        }
    }
</script>

<style scoped lang="scss">
.com-button {
  width: 80px;
  height: 40px;
  line-height: 40px;
  background: #2d8cf0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  &:hover {
    background: #57a3f3;
  }
  &:active {
    background: gray;
  }
}

.error{
    background: red;
}

.success{
    background: lightgreen;
}
</style>